﻿@page "/circular-gauge/range"

@using Syncfusion.Blazor.CircularGauge
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample illustrates how to highlight a region in an axis by using ranges in gauge. <b>Start value</b>, <b>end value</b>, <b>color</b>, <b>width</b> and <b>corner radius</b> of the range can be changed by using the options provided in the property panel.</p>
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see how to customize the ranges of an axis in the circular gauge. Ranges are used to group the axis values, you can use <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeRange.html#Syncfusion_Blazor_CircularGauge_CircularGaugeRange_Start'>Start</a></code>, <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeRange.html#Syncfusion_Blazor_CircularGauge_CircularGaugeRange_End'>End</a></code>, <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeRange.html#Syncfusion_Blazor_CircularGauge_CircularGaugeRange_Color'>Color</a></code>, <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeRange.html#Syncfusion_Blazor_CircularGauge_CircularGaugeRange_StartWidth'>StartWidth</a></code>, <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeRange.html#Syncfusion_Blazor_CircularGauge_CircularGaugeRange_EndWidth'>EndWidth</a></code>, <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeRange.html#Syncfusion_Blazor_CircularGauge_CircularGaugeRange_Radius'>Radius</a></code> and <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeRange.html#Syncfusion_Blazor_CircularGauge_CircularGaugeRange_RoundedCornerRadius'>RoundedCornerRadius</a></code> properties to customize the ranges. In this sample, an axis is shown with multiple ranges in the circular gauge component and options to customize the range properties with the property panel.</p>
   <p>More information on the ranges can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/circular-gauge/ranges'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-9 control-section sb-property-border">
    <SfCircularGauge>
        <CircularGaugeAxes>
            <CircularGaugeAxis StartAngle="210" EndAngle="150" Minimum="0" Maximum="120" Radius="80%">
                <CircularGaugeAxisLineStyle Width="10" Color="transparent"/>
                <CircularGaugeAxisLabelStyle UseRangeColor="@EnableRangeColor">
                    <CircularGaugeAxisLabelFont Size="12px" FontFamily="Roboto" FontStyle="Regular"/>
                </CircularGaugeAxisLabelStyle>
                <CircularGaugeAxisMajorTicks Height="10" Offset="5" UseRangeColor="@EnableRangeColor"/>
                <CircularGaugeAxisMinorTicks Height="0" Width="0" UseRangeColor="@EnableRangeColor"/>
                <CircularGaugeAnnotations>
                    <CircularGaugeAnnotation Radius="30%" Angle="0" ZIndex="1" >
                        <ContentTemplate>
                            <div><span class="templateText" style="font-size:14px; color:#9E9E9E;">Speedometer</span></div>
                        </ContentTemplate>
                    </CircularGaugeAnnotation>
                    <CircularGaugeAnnotation Radius="40%" Angle="180" ZIndex="1">
                        <ContentTemplate>
                            <div><span class="templateText" style="font-size:20px; color:#424242;">65 MPH</span></div>
                        </ContentTemplate>
                    </CircularGaugeAnnotation>
                </CircularGaugeAnnotations>
                <CircularGaugeRanges>
                    <CircularGaugeRange Start="@LowRangeStart" End="@LowRangeEnd" Color="@LowRangeColor" StartWidth="@LowRangeStartWidth" EndWidth="@LowRangeEndWidth" RoundedCornerRadius="@LowRangeCornerRadius"/>
                    <CircularGaugeRange Start="@MediumRangeStart" End="@MediumRangeEnd" Color="@MediumRangeColor" StartWidth="@MediumRangeStartWidth" EndWidth="@MediumRangeEndWidth" RoundedCornerRadius="@MediumRangeCornerRadius"/>
                    <CircularGaugeRange Start="@HighRangeStart" End="@HighRangeEnd" Color="@HighRangeColor" StartWidth="@HighRangeStartWidth" EndWidth="@HighRangeEndWidth" RoundedCornerRadius="@HighRangeCornerRadius"/>
                </CircularGaugeRanges>
                <CircularGaugePointers>
                    <CircularGaugePointer Value="65" Radius="60%" PointerWidth="8">
                        <CircularGaugePointerAnimation Enable="@GaugeAnimation"/>
                        <CircularGaugeCap Radius="7"/>
                        <CircularGaugeNeedleTail Length="18%"/>
                    </CircularGaugePointer>
                </CircularGaugePointers>
            </CircularGaugeAxis>
        </CircularGaugeAxes>
    </SfCircularGauge>
</div>
<div class="col-md-3 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table title="Properties" style="width: 100%">
                <tr>
                    <td>
                        <div> Select Range </div>
                    </td>
                    <td>
                        <div>
                            <SfDropDownList DataSource="@RangeData" @bind-Value="@RangeValue">
                                <DropDownListEvents TItem="Range1" ValueChange="RangeChange" TValue="string"/>
                                <DropDownListFieldSettings Text="Name" Value="Name"/>
                            </SfDropDownList>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>Range Start <span class="value">@RangeStartText</span> </div>
                    </td>
                    <td>
                        <div>
                            <input type="range" value="@RangeStartValue" min="0" max="120" @onchange="RangeStartChange" />
                        </div>
                    </td>
                </tr>

                <tr>
                    <td>
                        <div>Range End <span class="value">@RangeEndText</span> </div>
                    </td>
                    <td>
                        <div>
                            <input type="range" value="@RangeEndValue" min="0" max="120" @onchange="RangeEndChange" />
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>Range Color</div>
                    </td>
                    <td>
                        <div>
                            <SfDropDownList DataSource="@RangeColorData" @bind-Value="@RangeColorValue">
                                <DropDownListEvents TItem="RangeColor" ValueChange="RangeColorChange" TValue="string"/>
                                <DropDownListFieldSettings Text="Name" Value="Name"/>
                            </SfDropDownList>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>Range Font Color</div>
                    </td>
                    <td>
                        <div>
                            <SfCheckBox ValueChange="@RangeFontChange" Checked="@RangeFontChecked" TChecked="bool"/>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>Start Width <span class="value">@StartWidthText</span> </div>
                    </td>
                    <td>
                        <div>
                            <input type="range" value="@RangeStartWidthValue" min="0" max="30" @onchange="StartWidthChange"/>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>End Width <span class="value">@EndWidthText</span> </div>
                    </td>
                    <td>
                        <div>
                            <input type="range" value="@RangeEndWidthValue" min="0" max="30" @onchange="EndWidthChange"/>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>Corner Radius <span class="value">@CornerRadiusText</span> </div>
                    </td>
                    <td>
                        <div>
                            <input type="range" value="@RangeCornerRadiusValue" min="0" max="30" @onchange="CornerRadiusChange"/>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

<style>
    td {
        width: 40%;
    }
    .value{
        margin-left:10px;
    }
    .templateText{
        font-family:Regular; 
        margin-left:-33px
    }
    tr {
        height:40px;
    }
</style>

@code {
    private double LowRangeStart = 0;
    private double LowRangeEnd = 40;
    private string LowRangeColor = "#30B32D";
    private string LowRangeStartWidth = "10";
    private string LowRangeEndWidth = "10";
    private double LowRangeCornerRadius = 0;
    private double MediumRangeStart = 40;
    private double MediumRangeEnd = 80;
    private string MediumRangeColor = "#FFDD00";
    private string MediumRangeStartWidth = "10";
    private string MediumRangeEndWidth = "10";
    private double MediumRangeCornerRadius = 0;
    private double HighRangeStart = 80;
    private double HighRangeEnd = 120;
    private string HighRangeColor = "#F03E3E";
    private string HighRangeStartWidth = "10";
    private string HighRangeEndWidth = "10";
    private double HighRangeCornerRadius = 0;
    private bool EnableRangeColor;
    private string RangeValue = "Low";
    private double RangeStartValue = 0;
    private double RangeEndValue = 40;
    private string RangeColorValue = "#30B32D";
    private bool RangeFontChecked;
    private string RangeStartWidthValue = "10";
    private string RangeEndWidthValue = "10";
    private double RangeCornerRadiusValue = 0;
    private double RangeStartText = 0;
    private double RangeEndText = 40;
    private string StartWidthText = "10";
    private string EndWidthText = "10";
    private double CornerRadiusText = 0;
    private bool GaugeAnimation = true;
    public class Range1 { public string Name { get; set; } }
    private List<Range1> RangeData = new List<Range1> {
        new Range1{ Name = "Low"},
        new Range1{ Name = "Medium"},
        new Range1{ Name = "High"},
    };
    public class RangeColor {
        public string Name { get; set; }
    }
    private List<RangeColor> RangeColorData = new List<RangeColor> {
        new RangeColor{ Name = "#30B32D"},
        new RangeColor{ Name = "#FFDD00"},
        new RangeColor{ Name = "#F03E3E"},
    };
    private void RangeChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, Range1> args) {
        RangeValue = (args.Value).ToString();
        if (RangeValue == "Low") {
            RangeStartValue = RangeStartText = LowRangeStart;
            RangeEndValue = RangeEndText = LowRangeEnd;
            RangeStartWidthValue = StartWidthText = LowRangeStartWidth;
            RangeEndWidthValue = EndWidthText = LowRangeEndWidth;
            RangeCornerRadiusValue = CornerRadiusText = LowRangeCornerRadius;
            RangeColorValue = LowRangeColor;
        }
        else if (RangeValue == "Medium") {
            RangeStartValue = RangeStartText = MediumRangeStart;
            RangeEndValue = RangeEndText = MediumRangeEnd;
            RangeStartWidthValue = StartWidthText = MediumRangeStartWidth;
            RangeEndWidthValue = EndWidthText = MediumRangeEndWidth;
            RangeCornerRadiusValue = CornerRadiusText = MediumRangeCornerRadius;
        }
        else {
            RangeStartValue = RangeStartText = HighRangeStart;
            RangeEndValue = RangeEndText = HighRangeEnd;
            RangeStartWidthValue = StartWidthText = HighRangeStartWidth;
            RangeEndWidthValue = EndWidthText = HighRangeEndWidth;
            RangeCornerRadiusValue = CornerRadiusText = HighRangeCornerRadius;
        }
        GaugeAnimation = false;
    }
    private void RangeColorChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, RangeColor> args) {
        RangeColorValue = (args.Value).ToString();
        if (RangeValue == "Low") { LowRangeColor = RangeColorValue; }
        else if (RangeValue == "Medium") { MediumRangeColor = RangeColorValue; }
        else { HighRangeColor = RangeColorValue; }
        GaugeAnimation = false;
    }
    private void RangeStartChange(Microsoft.AspNetCore.Components.ChangeEventArgs args) {
        RangeStartValue = Convert.ToDouble(args.Value);
        if (RangeValue == "Low") { 
            LowRangeStart = RangeStartValue; 
        }
        else if (RangeValue == "Medium") { MediumRangeStart = RangeStartValue; }
        else { HighRangeStart = RangeStartValue; }
        RangeStartText = RangeStartValue;
    }
    private void RangeEndChange(Microsoft.AspNetCore.Components.ChangeEventArgs args) {
        RangeEndValue = Convert.ToDouble(args.Value);
        if (RangeValue == "Low") { LowRangeEnd = RangeEndValue; }
        else if (RangeValue == "Medium") { MediumRangeEnd = RangeEndValue; }
        else { HighRangeEnd = RangeEndValue; }
        RangeEndText = RangeEndValue;
    }
    private void StartWidthChange(Microsoft.AspNetCore.Components.ChangeEventArgs args) {
        RangeStartWidthValue = (args.Value).ToString();
        if (RangeValue == "Low") { LowRangeStartWidth = RangeStartWidthValue; }
        else if (RangeValue == "Medium") { MediumRangeStartWidth = RangeStartWidthValue; }
        else { HighRangeStartWidth = RangeStartWidthValue; }
        StartWidthText = RangeStartWidthValue;
    }
    private void EndWidthChange(Microsoft.AspNetCore.Components.ChangeEventArgs args) {
        RangeEndWidthValue = (args.Value).ToString();
        if (RangeValue == "Low") { LowRangeEndWidth = RangeEndWidthValue; }
        else if (RangeValue == "Medium") { MediumRangeEndWidth = RangeEndWidthValue; }
        else { HighRangeEndWidth = RangeEndWidthValue; }
        EndWidthText = RangeEndWidthValue;
    }
    private void CornerRadiusChange(Microsoft.AspNetCore.Components.ChangeEventArgs args) {
        RangeCornerRadiusValue = Convert.ToDouble(args.Value);
        if (RangeValue == "Low") { LowRangeCornerRadius = RangeCornerRadiusValue; }
        else if (RangeValue == "Medium") { MediumRangeCornerRadius = RangeCornerRadiusValue; }
        else { HighRangeCornerRadius = RangeCornerRadiusValue; }
        CornerRadiusText = RangeCornerRadiusValue;
    }
    private void RangeFontChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args) {
        RangeFontChecked = args.Checked;
        EnableRangeColor = RangeFontChecked;
    }
}